/*
 * @Author: ykp 501436989@qq.com
 * @Date: 2025-06-11 16:17:15
 * @LastEditors: ykp 501436989@qq.com
 * @LastEditTime: 2025-06-21 15:57:46
 * @FilePath: \react-demo-0611\src\components\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useState, useRef, useEffect } from "react";
import { uuid } from "./uuid.ts";
function Gonum() {
  const [count, setCount] = useState(0);
  const [countliet, setCountliet] = useState<number[]>([]);
  const countRef = useRef(null);
  // useRef 用来获取dom元素 countRef.current

  console.log(countRef.current); //组件还未挂载打印null 需要使用 useEffect   在组件重新渲染后也会打印
  //函数体里的 console.log：每次渲染都执行（包括初始渲染、每次更新渲染 ），初始渲染时 DOM 未挂载所以是 null，更新渲染时能拿到 DOM。
  useEffect(() => {
    console.log(countRef.current);
  }, []); //开启严格模式会打印两次 关闭严格模式只会打印一次
  const handleClick = () => {
    setCount(count + 1);
    if (count >= countliet.length) {
      setCountliet([...countliet, count]);
    }
  };
  useEffect(() => {
    console.log("countliet", countliet);  
  }
  , [countliet]); //监听countliet的变化
  
  const reduceClick = () => {
    setCount(count - 1);
  };
  return (
    <>
      <div className="text-5 min-w-2 h  bg-red-200 text-dark ">{count}</div>
      <button className="p-2 mx-10 w-16 my-2 bg-danger" onClick={reduceClick}>
        ---
      </button>
      <button className="p-2 mx-10 w-16 my-2 bg-blue" onClick={handleClick}>
        +++
      </button>
      <div>
        {countliet.map((item) => {
          return <div key={uuid(16)}>{item}</div>;
        })}
      </div>
      <div
        ref={countRef}
        className="text-2 text-center w-full h-[500px] bg-blue-2 text-red-500"
      >



        这是一个测试组件，使用了useRef来获取dom元素，打印出来的值为：
        <br />
        注意：useRef获取的值在组件挂载前是null，挂载后才会有值。
        <br />

      </div>
    </>
  );
}

export default Gonum;
